<template>
	<div class="share-goods">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				推广赚
			</div>
		</div>
		<div class="sg-content">
			<div class="sgc-header">
				<p>长按第一张图片，可分享给好友</p>
				<!-- <p>已选<span class="common-color">{{count}}</span>张</p> -->
			</div>
			<div class="sgc-imgs">
				<div class="sgc-img"
					v-for="(img, index) in list"
					v-if="list.length > 0"
				>
					<img v-lazy="img" preview="1" preview-text="产品图片">
				</div>
				<div class="sgc-img"
					v-for="(img, index) in sImgList"
					v-if="sImgList.length > 0"
				>
					<img v-lazy="img" preview="1" preview-text="产品图片">
				</div>
			</div>
			
			<div class="sgc-title">
				<h1>分享文案</h1>
				<div class="sgct-content">
					<div class="title">{{title}}</div>
					<div class="origin">【在售价】{{origin_price}}元</div>
					<div class="origin">【券后价】{{coupon_price}}元</div>
					<div>----------------------------</div>
					<div class="tips">复制这条信息，{￥选择分享渠道后自动生成淘口令￥}，打开【手机淘宝】即可领券下单</div>
				</div>
				<div class="copy"
					v-clipboard:copy="pwd_c"
					v-clipboard:success="onCopy"
					v-clipboard:error="onError"
				>点我复制分享文案</div>
			</div>
		</div>
		<!-- <share :config="config"></share> -->
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				count: 0,
				selected: [],
				coupon_price: this.$route.query.coupon_price,
                origin_price: this.$route.query.origin_price,
                imgList: this.$route.query.imgList,
                title: this.$route.query.title,
                type: this.$route.query.type,
                sImgList: [],
                Tpwd: '',
                nums: [],
                PWD: this.$route.query.PWD,
                pwd_c: '',
                list: [],
                shareImg: '',
                phone: '',
                url: this.$route.query.url,
			}
		},
		beforeMount(){
			for(var i =0,len=this.imgList.length; i < len; i++){
				// this.nums.push(i+1);
				this.list.push(this.imgList[i]);
				this.sImgList = this.list;						
			};
			this.coupon_price = parseFloat(this.coupon_price)
			this.coupon_price = this.coupon_price.toFixed(1)
		},
		mounted(){
			this.getTpwd();
			var u = navigator.userAgent;
			if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
				this.phone = 'Android';
				// window.location.href = "mobile/index.html";
			} else if (u.indexOf('iPhone') > -1) {//苹果手机
				// window.location.href = "mobile/index.html";
				this.phone = 'IOS';
			}
			this.getShare();			
		},
		methods: {
			onCopy: function (e) {
		        Toast('复制成功')
		    },
		    onError: function (e) {
		        Toast('无法复制文本！')
		    },
			getTpwd(){
        		this.pwd_c = this.title + ("\n") + 
					'【在售价】' + this.origin_price + '元' + ("\n") +
					'【券后价】' + this.coupon_price + '元' + ("\n") +
					'复制这条信息，' + this.PWD + '，打开【手机淘宝】即可领券下单'
			},
			getShare(){
				var self = this;
				self.goods_id = self.$route.params.id;
				var params = new URLSearchParams();
            	params.append('num_iid', self.goods_id);
            	params.append('type', self.type);
            	params.append('model', self.phone);
            	axios.post(Http.SHAREPIC, params)
            	.then( res => {
            		var ret =res.data;
            		if( ret.code == 1){
            			self.list = [];
            			self.shareImg = ret.data[0];
			            self.sImgList = ret.data;
			            self.$previewRefresh();
            		}
            		           	
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sg-content{
		width: 100%;
		padding: 0.2rem 0;
		padding-top: 0rem;
		background: #f5f5f5;
		.sgc-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0.1rem 0.24rem;
			color: #333;
		}
		.sgc-imgs{
			overflow-x: scroll;
			width: 100%;
			display: flex;
			height: 4rem;
			.sgc-img{
				margin-right: 0.1rem;
				background: #b4b4b4;
				img{
					width: auto;
					height: 4rem;
				}
				.icon{
					position: absolute;
					top: 0.1rem;
					right: 0.1rem;
					width: 0.4rem;
					height: 0.4rem;
					border-radius: 0.4rem;
					background: rgba(0,0,0,0.6);
					&.active{
						background: $color;
					}
					i{
						color: #fff;
					}
				}
				input{
					position: absolute;
					top: 0.1rem;
					right: 0.1rem;
					width: 0.4rem;
					height: 0.4rem;
					border-radius: 0.4rem;
					background: rgba(0,0,0,0.6);
				}
				i{
					position: absolute;
					top: 0.1rem;
					right: 0.1rem;
					z-index: 2;
					width: 0.4rem;
					height: 0.4rem;
					line-height: 0.4rem;
					color: #fff;
				}
			}
		}
		.sgc-title{
			margin-top: 0.2rem;
			h1{
				padding: 0.24rem;
				text-align: left;
				font-size: 0.28rem;
				background: #fff;
			}
			.sgct-content{
				padding: 0.24rem;
				text-align: left;
				background: #f5f5f5;
				div{
					margin-bottom: 0.2rem;
				}
			}
			.copy{
				margin: 0 10%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.26rem;
				background: #fff;
				color: $color;
			}
		}
	}
</style>